<template>
  <div class="app-container">
    <div class="back-item" >
      <h2>icon 列表</h2>
      <div class="icon-box">
        <div
            class="icon-item"
            v-for="(item) in iconsList" :key="item.key"
            @click="selected(item.key)"
        >
          <RenderVnode :vNode="item.icon"/>
          <div>
            {{item.key}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Iconview">
  import * as icons from '@ant-design/icons-vue';
  import RenderVnode from "./RenderVnode";

  const iconsList = ref([]);
  function getIcons() {
    for (let key in icons) {
      if(icons[key] && icons[key].displayName && key != "default"){
        let iconItem = {
          key: key,
          icon: h(icons[key])
        }
        iconsList.value.push(iconItem);
      }
    }
  }

  function selected(icon) {
    let oInput = document.createElement('input')
    let iconDom = `<${icon}/>`
    oInput.value = iconDom
    document.body.appendChild(oInput)
    oInput.select() // 选择对象
    document.execCommand('Copy') // 执行浏览器复制命令
    oInput.className = 'oInput'
    oInput.style.display = 'none'
    message.success(`${icon} 图标复制成功！`)
    oInput.remove();
  }

  getIcons();
</script>

<style lang="scss" scoped>
  .icon-box{
    display: flex;
    flex-wrap: wrap;
    .icon-item {
      text-align: center;
      width: 130px;
      margin: 10px;
      font-size: 13px;
      /*flex: 1;*/
      .anticon{
        font-size: 26px;
        margin-bottom: 8px;
      }
    }
  }


</style>